<script setup lang="ts">
import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessageBox } from 'element-plus'
import { useI18n } from '@/hooks/web/use-i18n'
import { useSysStore } from '@/store/modules/system'
import { useDesign } from '@/hooks/web/use-design'
import { useTagsViewStore } from '@/store/modules/tags-view'
import { Setting as appSetting } from '@/components/app-setting'
import { ref } from 'vue'

const tagsViewStore = useTagsViewStore()

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('user-info')

const setting = ref()

const { t } = useI18n()

const openSetting = () => {
  console.log(setting.value)
  setting.value.drawer = true
}

const loginOut = () => {
  ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  })
    .then(async () => {
      useSysStore().logout()
      tagsViewStore.delAllViews()
    })
    .catch(() => {})
}
</script>

<template>
  <div :class="prefixCls">
    <app-setting ref="setting" />
    <el-dropdown trigger="click">
      <div class="flex items-center">
        <img
          src="@/assets/imgs/logo.png"
          alt=""
          class="w-[calc(var(--logo-height)-25px)] rounded-[50%]"
        />
        <span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]"
          >Archer</span
        >
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item divided>
            <div @click="openSetting">{{ t('setting.projectSetting') }}</div>
          </el-dropdown-item>
          <el-dropdown-item divided>
            <div @click="loginOut">{{ t('common.loginOut') }}</div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
